Repository navigation
feat: ap.visual-editor.background-controls filter (#649) - #652
Conversation
Adds a shared JS filter that lets external packages contribute panels to the background/appearance area of any block that opts into a background support, without each package enumerating target blocks and wrapping editor.BlockEdit itself. The visual editor now owns the target-block decision via a single editor.BlockEdit HOC that gates on supports.background and supports.color.background, then renders filter-registered controls sorted by priority (default 10, lower first) and deduped by id (last-wins). Downstream packages like liquid-glass can drop their per-package withBlockEdit HOC and register a single filter callback instead. Closes #649
|
Warning Review limit reached
Next review available in: 32 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
📝 WalkthroughWalkthroughAdds the ChangesBackground Controls Extension
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant ExternalPackage
participant WordpressHooks
participant BackgroundControlsHOC
participant BlockInspector
ExternalPackage->>WordpressHooks: Register background-control filter
BlockInspector->>BackgroundControlsHOC: Render supported block edit
BackgroundControlsHOC->>WordpressHooks: Apply filter with block context
WordpressHooks-->>BackgroundControlsHOC: Return filtered controls
BackgroundControlsHOC-->>BlockInspector: Render ordered control panels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@resources/js/visual-editor/background-controls/background-controls.ts`:
- Around line 90-137: Update isBackgroundControl to validate priority when it is
present, allowing undefined but requiring a finite numeric value; reject
malformed controls before getFilteredBackgroundControls sorts them, so the
priorityA - priorityB comparator never receives invalid values.
In `@resources/js/visual-editor/background-controls/with-background-controls.tsx`:
- Around line 64-78: Update resolveBlockSupports to return a deep copy of the
validated blockType.supports object rather than the registry’s live reference,
preserving the existing empty-object behavior for missing or invalid supports.
Also add a “Treat as read-only” note to the blockSupports field in
BackgroundControlContext.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 718184b1-5935-4b97-bb11-cecea01e096b
📒 Files selected for processing (7)
docs/Hooks-and-Events.mdresources/js/visual-editor/background-controls/__tests__/background-controls.test.tsresources/js/visual-editor/background-controls/__tests__/with-background-controls.test.tsxresources/js/visual-editor/background-controls/background-controls.tsresources/js/visual-editor/background-controls/index.tsresources/js/visual-editor/background-controls/with-background-controls.tsxresources/js/visual-editor/editor/editor-app.tsx
- Register the BlockEdit HOC BEFORE responsive/state HOCs so it wraps innermost. context.attributes is now the breakpoint-merged / state-resolved view (not raw idle) and context.setAttributes routes writes through the responsive/state wrappers. - Wire registerBackgroundControls into the site-editor bootstrap so the filter fires when editing templates, template parts, and patterns (previously dead in the site editor). - Dedupe by id BEFORE priority sort so "last-wins mirroring @wordpress/hooks" tracks registration order, not sort order — a later addFilter overrides an earlier one at the same id regardless of relative priorities. - Deep-clone context.blockSupports (structuredClone) so a filter callback can't corrupt @wordpress/blocks' registry via mutation. Freeze context.attributes and type both fields as Readonly<>. - Wrap applyFilters in try/catch; log to console.error and return an empty list on throw so one bad third-party filter can't trip BlockCrashBoundary for every block in the session. - Reject controls with a non-finite priority (NaN, strings, Infinity) at validation time — engine-dependent sort order eliminated. - Reject empty-string id at validation time. - Always return the Fragment shape from the HOC — a 0→1 controls transition no longer remounts BlockEdit and lose RichText cursor / drag / child hook state. - Drop the dead `data-background-control` wrapper div. - Move `ap.visual-editor.rendered-block` docs to the PHP filters section with correct description (it's a server-side PHP filter, not a save-time JS filter). - Fix the docs example gate to check both `blockSupports.background` and `blockSupports.color.background` — the naive `!blockSupports.background` check would silently no-op on color-background blocks. Overlaps with CodeRabbit review comments on PR #652 (priority type-check + resolveBlockSupports live-reference leak). New tests cover: registration-order-over-priority dedupe (both directions), NaN/string/Infinity priority rejection, empty-id rejection, thrown-callback swallowing, attributes-freeze semantics, blockSupports deep-clone semantics, always-Fragment BlockEdit stability across empty→non-empty controls transitions. Test count: 20 → 27 in background-controls; full editor suite 1861 → 1868 passing (site-editor-app.test.tsx pre-existing failure remains, now surfacing as a transitive `@wordpress/blocks` JSON-import error during collection rather than the previous 17 runtime failures — the file has not passed on release/1.x for this reason). Refs #649
The new site-editor bootstrap import of `registerBackgroundControls` pulls the background-controls barrel into the site-editor-app test's module graph, which transitively loads `@wordpress/block-editor` and its `block-compare` → `diff` subpath — the same unresolved-under-jsdom chain the file already stubs `BlockEditorBoundary` and `BlockLibrarySidebar` for. Stub `../../background-controls` to a no-op registrar so the shell test can boot again on CI. The HOC and filter helpers have their own focused suites under `background-controls/__tests__/`. Refs #649
Summary
ap.visual-editor.background-controls— a JS filter that lets external packages contribute panels to any block that opts into a background support, without each package enumerating target blocks and wrappingeditor.BlockEdititself.editor.BlockEditHOC that gates onsupports.background/supports.color.background, then renders filter-registered controls sorted bypriority(default 10, lower first) and deduped byid(last-wins).docs/Hooks-and-Events.mdalongside the other JS-side filters (document-panels,canvas-styles,rendered-block).Downstream
artisanpack-ui/liquid-glass(and any future "effect" package) can now drop its per-packageeditor.BlockEditHOC and register a single filter callback instead.Closes #649.
API
Test plan
vitest run resources/js/visual-editor/background-controls— 20/20 pass (filter shape + HOC gating + priority ordering + block support detection)vitest run resources/js/visual-editor) still green apart from the pre-existingsite-editor-app.test.tsxfailures (verified reproducing onrelease/1.xwith my changes stashed)artisanpack/group, register a stub filter callback in the browser console, confirm a new PanelBody appears in the inspector; selectartisanpack/separator(or any non-background block), confirm no panel appearsliquid-glass/resources/js/index.tsto consume the filter (follow-up PR in that repo)🤖 Generated with Claude Code
Summary by CodeRabbit